<template>
  <div>
    <h1>toRef</h1>
    <h3>这obj中的name</h3>
    <h1>{{ obj.name }}</h1>
    <h3>这是ref包裹变为响应</h3>
    <h1>{{ name1 }}</h1>
    <h3>这个是toRef包裹变为响应式</h3>
    <h1>{{ name2 }}</h1>
    <button @click="changeName">更改name值</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef } from "vue";

export default defineComponent({
  setup() {
    const obj = reactive({
      name: "tom",
      age: 10,
    });

    const name1 = ref(obj.name);
    console.log(name1);

    const name2 = toRef(obj, "name");
    console.log(name2);

    function changeName() {
      name2.value += "222";
    }

    return {
      obj,
      name1,
      name2,
      changeName,
    };
  },
});

</script>

<style scoped>
</style>